<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>中智融通</title>
		<style>
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
				background-color: #F0EED9;
				font: normal 100% Helvetica, Arial, sans-serif;
			}
			.container {
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.main {
				position: relative;
				margin-left: 2%;
				margin-right: 2%;
				border-radius: 8px;
				background-color: #fff;
				border-color: #F0F0F0;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				box-shadow: 0 0 3px #F0F0F0;
			}
			.footer {
				margin-left: auto;
				margin-right: auto;
				width: 90%;
				line-height: 1.42857143;
				text-align: left;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.btn {
				display: inline-block;
				padding: 6px 12px;
				font-size: 1em;
				font-weight: normal;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-image: none;
				border: 1px solid transparent;
				border-radius: 4px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.btn:focus, .btn:active:focus, .btn.active:focus {
				outline: thin dotted;
				outline: 5px auto -webkit-focus-ring-color;
				outline-offset: -2px;
			}
			.btn:hover, .btn:focus {
				color: #333;
				text-decoration: none;
			}
			.btn:active, .btn.active {
				background-image: none;
				outline: 0;
				-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
				box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
			}
			.btn-primary {
				color: #fff;
				background-color: #428bca;
				border-color: #357ebd;
			}
			.btn-primary:hover, .btn-primary:focus {
				color: #fff;
				background-color: #3276b1;
				border-color: #285e8e;
			}
			.btn-success {
				color: #fff;
				background-color: #5cb85c;
				border-color: #4cae4c;
			}
			.btn-success:hover, .btn-success:focus, .btn-success.active {
				color: #fff;
				background-color: #47a447;
				border-color: #398439;
			}
			.btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
				background-image: none;
			}
			.btn-danger {
				color: #fff;
				background-color: #FF0F2D;
				border-color: #FF5265;
			}
			.btn-danger:hover, .btn-danger:focus, .btn-danger.active {
				color: #fff;
				background-color: #FF0F2D;
				border-color: #FF5265;
			}
			.btn-danger:active, .btn-danger.active {
				background-image: none;
			}
			.form-group {
				width: 90%;
				margin-left: 8%;
				margin-right: 5%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.label {
				display: block;
				font-weight: bold;
				font-size: 1.1em;
				line-height: 1;
				white-space: nowrap;
				vertical-align: baseline;
				border-radius: .25em;
			}

			.form-control {
				display: inline-block;
				width: 90%;
				font-size: 1.1em;
				padding: 6px 12px;
				line-height: 1.42857143;
				color: #555;
				background-color: #F6F6F6;
				border: 1px solid #ccc;
				border-radius: 6px;
				-webkit-appearance: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.form-control:focus {
				border-color: #66afe9;
				outline: 0;
			}

			.form-control::-webkit-input-placeholder {
				color: #999;
			}
			textarea.form-control {
				height: auto;
			}
			a {
				outline: none;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="container" id="container">
			<!--			<div class="head" id="head"></div>
			-->
			<div class="main" id="main">
				<!--				<div class="logo"></div>
				-->
				<div id="title" style="text-align: center; font-size: 1.6em; font-weight: bold;">
					工单信息
				</div>
				<form id="form">
					<div style="width:96%;margin-left:auto;margin-right:auto;border-top: 0.1em dashed #cccccc;height: 0.1em;overflow:hidden; "></div>
					<div class="form-group">
						<label class="label" style="vertical-align: top;">机器地址:</label>
						<input type="text" id="machineAddress" class="form-control" value="${repair.machineAddress}" disabled="disabled">						
					</div>
					<div class="form-group">
						<label class="label" style="vertical-align: top;">联系人电话:</label>
						<input type="text" id="contactPhone" class="form-control" value="${repair.contactPhone}" disabled="disabled">						
					</div>
                    <div class="form-group">
                        <label class="label" style="vertical-align: top;">报修时间:</label>
                        <input type="text"  class="form-control" value="${repair.createTimeStr}" disabled="disabled">
                    </div>
                    <div class="form-group">
                        <label class="label" style="vertical-align: top;">期望维修时间:</label>
                        <input type="text" class="form-control" value="${repair.expectedRepairTimeStr}" disabled="disabled">
                    </div>
                    <div class="form-group">
                        <label class="label">故障代码:</label>
                        <input type="text" class="form-control" value="${repair.breakCode}" readonly="readonly">
                    </div>
					<div class="form-group">
						<label class="label" style="vertical-align: top;">故障信息:</label>
						<textarea id="description" name="description" class="form-control" rows="4" disabled="disabled">${repair.faultInfo}</textarea>
					</div>
					<div class="form-group" style="text-align: right;width: 81%; padding-bottom: 15px;">
						<button id="button1" type="button" class="btn btn-primary" style="width: 49%;">
							确认
						</button>
						<a id="button2" type="button" class="btn btn-primary" style="width: 49%;">
							反馈
						</a>
					</div>
				</form>
			</div>
		</div>
		<script>
			document.body.onload = function() {
				var clientHeight = document.body.clientHeight;
				
				var container = document.getElementById('container');
				container.style.minHeight = clientHeight + 'px';
				container.style.paddingTop = 0.02*clientHeight + 'px';
				var main = document.getElementById('main');
				main.style.minHeight = 0.96 * clientHeight + 'px';
				
				var title = document.getElementById('title');
				title.style.paddingTop = 0.02 * clientHeight + 'px';
				title.style.paddingBottom = 0.02 * clientHeight + 'px';
				
  				var formGroups = document.getElementsByClassName('form-group');
  				for(var i=0,j=formGroups.length; i<j; i++){
  					if(i==0){
  						formGroups[i].style.paddingTop = 0.05* clientHeight + 'px';
  					}else if(i == j-1){
  						 formGroups[i].style.paddingTop = 0.05* clientHeight + 'px';
  					}else{
  						 formGroups[i].style.paddingTop = 0.03* clientHeight + 'px';
  					}
  				}
//				var footer = document.getElementById('footer');
//				footer.style.height = 0.13 * clientHeight + 'px';
//				footer.style.paddingTop = 0.02 * clientHeight + 'px';
				
				document.getElementById('button1').onclick = function() {
					window.location.href = '<%=request.getContextPath()%>/weixin/repair/confirm/${repair.id}';
				}
				document.getElementById('button2').onclick = function() {
					window.location.href = '<%=request.getContextPath()%>/weixin/repair/feedback/${repair.id}';
				}
			}
		</script>
	</body>
</html>